<template>
  <div>
    <div class="top">
      <el-card>
        <el-form :inline="true" :model="params" class="demo-form-inline">
          <el-form-item :label="title[0]">
            <el-input v-model="params.one" placeholder="请输入" />
          </el-form-item>
          <el-form-item :label="title[1]">
            <el-input v-model="params.two" placeholder="请输入" />
          </el-form-item>
          <el-form-item :label="title[2]">
            <el-select v-model="params.three" placeholder="请选择">
              <el-option label="全部" value=" " />
              <el-option label="停用" value="0" />
              <el-option label="启用" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchFn">搜索</el-button>
            <el-button @click="reSet">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="content">
      <el-card>
        <div slot="header" class="clearfix">
          <el-button class="add" @click="addFn">新增仓库</el-button>
          <div v-if="isRight" class="right">
            <el-button class="daoru" @click="downloadFn">下载模板</el-button>
            <el-button class="daoru" @click="uploadFn">导入信息</el-button>
          </div>
        </div>
        <el-table :data="list" stripe style="width: 100%" size="mini">
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column
            v-for="item in arr"
            :key="item"
            :prop="titleObj[item]"
            :label="item"
            align="center"
          />
          <!-- <el-table-column prop="date" label="日期" width="180" align="center" />
          <el-table-column prop="name" label="姓名" width="180" align="center" />
          <el-table-column prop="address" label="地址" align="center" /> -->
          <el-table-column width="180" label="操作" align="center" fixed="right">
            <template #default="{row}">
              <el-button type="text" @click="mondifyFn(row)">编辑</el-button>
              <el-button type="text" @click="stopFn(row)">{{ row.status }}</el-button>
              <el-button type="text" @click="delFn(row)">删除</el-button>
            </template></el-table-column>
        </el-table>
        <div class="footer">
          <el-pagination
            :current-page="value.current"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="value.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
    <el-dialog
      title="导入信息"
      :visible.sync="dialogShow"
      width="50%"
      @close="close"
    >
      <UploadExcel :before-upload="beforeUpload" :on-success="onSuccess" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :disabled="btn" @click="onSuccess">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { importExcel } from '@/api'
import UploadExcel from '@/components/UploadExcel'
import titleObj from '@/utils/titleToObj'
export default {
  components: {
    UploadExcel
  },
  props: {
    isRight: {
      type: Boolean,
      default: false
    },
    value: {
      type: Object,
      default: () => {}
    },
    total: {
      type: Number,
      default: 0
    },
    list: {
      type: Array,
      default: () => []
    },
    title: {
      type: Array,
      default: () => []
    },
    arr: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      file: '',
      btn: true,
      dialogShow: false,
      titleObj: titleObj,
      params: {
        one: '',
        two: '',
        three: ''
      },
      tableData: []
    }
  },
  methods: {
    reSet() {
      this.params = {}
      this.$emit('input', { size: 10, current: 1 })
    },
    handleSizeChange(val) {
      this.value.size = val
      this.$emit('input', this.value)
    },
    handleCurrentChange(val) {
      this.value.current = val
      this.$emit('input', this.value)
    },
    // 操作区域按钮
    mondifyFn(val) {
      this.$emit('mondify', val)
    },
    stopFn(val) {
      this.$emit('stop', val)
    },
    delFn(val) {
      this.$emit('del', val)
    },
    searchFn() {
      this.$emit('search', this.params)
    },
    addFn() {
      this.$emit('add')
    },
    // 下载表格
    downloadFn() {

    },
    // 上传表格
    uploadFn() {
      this.dialogShow = true
    },
    // 关闭上传弹窗
    close() {
      this.dialogShow = false
    },
    // 表格上传之前的校验函数
    async beforeUpload(file) {
      // 这个函数必须 return 一个布尔值 并且只有 return 出去的是 true 的时候才会执行后续的解析 excel 的操作
      // 如果 reture false，表示校验不通过，不会进行正式的解析操作
      console.log('上传前', file)

      // 文件大小超过 1M 不允许导入
      const isLt1M = file.size / 1024 / 1024 < 1 // 小于1M
      if (isLt1M) {
        this.btn = false
        return true
      }
      this.$message({
        message: '文件体积不能超过1M',
        type: 'warning'
      })
      const filed = new FormData()
      filed.append('filed', file)
      this.file = filed
      return false
    },
    async onSuccess({ results, header }) {
      // results：表体数据
      // header：表头数据
      console.log('上传完成', results, header)
      // 数据转换
      // 中英文对照关系
      // const headerRelation = { ...titleObj }
      // 将解析出来的 excel 数据中的表体数据的的 key 换成英文
      // const data = this.getImportData(results, headerRelation)
      // 调用接口
      // console.log('1', data)
      await importExcel(this.file)
      // 提示用户
      this.$message.success('批量导入成功')
    },
    getImportData(results, headerRelation) {
      const arr = []
      // 将所有的中文 key 转换成英文 key，然后添加到新数组中
      results.forEach(item => {
        const obj = {}
        Object.keys(headerRelation).forEach(key => {
          obj[headerRelation[key]] = item[key]
        })
        arr.push(obj)
      })
      return arr
    }
  }
}
</script>

<style lang="scss" scoped>
.top{
  margin-bottom: 20px;
}
.el-form.demo-form-inline.el-form--inline{
  display: flex;
  align-items: center;
}
.el-form-item {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  justify-items: center;
  width: 350px;
  margin-left: 30px;
::v-deep .el-form-item__content{
  flex: 1;
  width: 100%;
  .el-select{
    width: 100%;
  }
  .el-input__inner{
    background-color: #f8f5f5;
  }
  .el-button{
    &:nth-child(1){
      margin-left: 200px;
    }
    margin-top: 25px;
    color: #000;
    border-radius: 20px;
  }
}
}
.clearfix{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .right {
    flex: 1;
    display: flex;
    justify-content: end;
  }
}
.el-button--default.add{
  background-color: #00be76;
  color: #fff;
  border-radius: 20px;
}
.daoru{
  background-color: #f2f2f2;
  color: #000;
  border-radius: 20px;
  &:hover {
    background-color: #ffb200;
  }
}
::v-deep .is-leaf{
background-color: #f9f6ee;
}
.footer{
display: flex;
align-items: center;
justify-content: center;

}
</style>
